<template>
	<view class="container">
		<view class="px-2">
			<view class="" style="height: 200rpx;">
				
			</view>
		
			<view class="rounded p-2 bg-white my-2 shadow-bottom flex-column ">
				<view class="flex-1 flex p-2 ">
					<template v-if="loginStatus==='已登录'">
						<image class="rounded-circle mr-2 shadow" :src="avatar" mode="" style="width: 80rpx;height: 80rpx;"></image>
					</template>
					<template v-else>
						<image class="rounded-circle mr-2 shadow" :src="defaultAvatar" mode="" style="width: 80rpx;height: 80rpx;"></image>
					</template>
					<template v-if="loginStatus==='已登录'">
						<view class="flex align-center font text-light-black">
							<text>{{name}}</text>
						</view>
					</template>
					<template v-else>
						<view class="flex align-center font text-light-black">
							<text>{{defaultName}}</text>
						</view>
						
					</template>
					
				</view>
				<template v-if="loginStatus==='已登录'">
					<view class="flex-1 bg-light-muted rounded flex p-2 shadow-bottom text-light-black">
						<view class="flex-1 flex justify-center border-right animate__animated animate__pulse" style="color: #007BFF;">
							<text>累计解答：{{total}}</text>
						</view>
						<view class="flex-1 flex justify-center animate__animated animate__pulse" style="color: #00CF97;">
							<text>正确率：{{total!=0?Math.round(100*correct/total):0}}%</text> 
						</view>
					</view>
				</template> 
				
			</view>
			<view class="flex   justify-center my-4">                                                                                     
				<view @click="ToRanklist()" class="flex-1 mr-2 p-2 rounded shadow-bottom flex-column text-white animate__animated animate__fadeIn" style="background-image: linear-gradient(120deg,#5555ff,#aa55ff);">
					<view class="flex p-1"> 
						<text>排行榜</text>
					</view>
					<view class=" flex justify-center align-center">
						<image src="https://s3.bmp.ovh/imgs/2022/04/14/a67c38d5d107307c.png" mode="" style="height: 180rpx;width: 180rpx;"></image>
					</view> 
					
				</view>
				<view @click="ToRedJourney()" class="flex-2 ml-2 p-2 rounded shadow-bottom flex-column text-white animate__animated animate__fadeIn" style="background-image: linear-gradient(120deg,#ff5500,#ffaa00);">
					<view class="flex p-1"> 
						<text>红色足迹</text>
					</view>
					<view class=" flex justify-center align-center">
						<image src="https://s3.bmp.ovh/imgs/2022/04/14/7f8710800ea8ab16.png" mode="" style="height: 180rpx;width: 180rpx;"></image>
					</view> 
					
				</view>
			</view>
			<view class="flex   justify-center my-4">
				<view @click="ToCuoti()" class="flex-1 mr-2 p-2 rounded shadow-bottom flex-column text-white animate__animated animate__pulse"style="background-image: linear-gradient(120deg,#ff5500,#ffaa00);" >
					<view class="flex p-1">  
						<text>错题本</text>
					</view> 
					<view class=" flex justify-center align-center">
						<image src="https://s3.bmp.ovh/imgs/2022/04/14/b2cc71f5e69ddbf9.png" mode="" style="height: 180rpx;width: 180rpx;"></image>
					</view> 
					
				</view>
				<view @click="ToTopics()" class="flex-1 ml-2 p-2 rounded shadow-bottom flex-column text-white animate__animated animate__pulse" style="background-image: linear-gradient(120deg,#5555ff,#aa55ff);">
					<view class="flex p-1"> 
						<text>开始答题</text>
					</view>
					<view class=" flex justify-center align-center">
						<image src="https://s3.bmp.ovh/imgs/2022/04/14/90f5190d27e57b2c.png" mode="" style="height: 180rpx;width: 180rpx;"></image>
					</view> 
					
				</view>
			</view>
		
		</view>
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginStatus: 1,
				defaultName: '',
				defaultAvatar: '',
				name: '',
				avatar: '',
				openid: '',
				correct:0,
				total:0,
				user:{}
			}
		},
		async onLoad() {
			uni.showNavigationBarLoading()
			this.defaultAvatar = uni.getStorageSync('defaultAvatar');
			this.defaultName = uni.getStorageSync('defaultName');
			this.loginStatus = uni.getStorageSync('loginStatus');
			
			this.openid = uni.getStorageSync('openid');
			this.avatar = uni.getStorageSync('avatar');
			this.name = uni.getStorageSync('name');
			if(this.loginStatus==='已登录')
			{
				console.log(123) 
				let res=await this.$c.getUser(uni.getStorageSync('openid'))
				
				this.user=res.result.data
				this.correct=this.user.correct_ti.length
				this.total=this.correct+this.user.error_ti.length
				
			} 
			uni.hideNavigationBarLoading()
		},
		methods: {
			async ToTopics()
			{
				
				if (uni.getStorageSync('loginStatus') != '已登录') 
				{
					await this.$c.login() 
				}
					
				uni.navigateTo({
					url: '../../studyPack/pages/Topics/Topics',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			async ToRanklist()
			{
				if (uni.getStorageSync('loginStatus') != '已登录')
					await this.$c.login()
				uni.navigateTo({ 
					url: '../../studyPack/pages/ranklist/ranklist',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			async ToCuoti()
			{
				if (uni.getStorageSync('loginStatus') != '已登录')
					return
				
				uni.navigateTo({
					url: '../../studyPack/pages/cuoti/cuoti',
					success: res => {},
					fail: () => {},
					complete: () => {} 
				});
			},
			ToRedJourney() 
			{
				uni.navigateTo({
					url: '../../studyPack/pages/red-journey/red-journey',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
page {
	width: 100%;
	height: 100%;
}
.container {
	
	background-image: linear-gradient(120deg,#ff0000,#ff5500);
	/* background-size: 100% 100%; */
	background-size: contain;
	/* width: 100%; */
	min-height: 100%;
	background-repeat: no-repeat;
}
</style>
